import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, Inter, V } from '@/components';

interface HomeHeaderProps {
  carName: string;
  subtitle: string;
  onDidClick?: (type: 'address' | 'message' | 'car') => void;
}

export const HomeNavigator = (props: HomeHeaderProps) => {
  const { carName, subtitle, onDidClick } = props;
  return (
    <V f row jc="sb" ai="c" p="20">
      <V row ai="c" onPress={() => onDidClick?.('address')}>
        <Ionicons name="location" size={24} color="#64748b" />
        <Text>北京</Text>
      </V>
      <V onPress={() => onDidClick?.('car')}>
        <Inter fs={14} fw="600" c={colors.text.primary}>
          {carName}
        </Inter>
      </V>
      <V ai="c" jc="c" onPress={() => onDidClick?.('message')}>
        <Ionicons name="notifications-outline" size={24} color="#64748b" />
      </V>
    </V>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 20,
    backgroundColor: '#ffffff',
  },
  location: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  greeting: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 16,
    color: '#64748b',
  },
  notificationButton: {
    padding: 8,
  },
});
